<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Games:  Hit The Dot </TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Josh Birk ">
<META NAME="section" CONTENT="Games">
<META NAME="description" CONTENT="How many dots do you think you can hit in 20 seconds?  Play this interesting JavaScript game and find out!">

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
gamelength=30;
timerID=null
var playing=false;
var numholes=6*10;
var currentpos=-1;
function clrholes() {
for(var k=0;k<document.dmz.elements.length;k++)
document.dmz.elements[k].checked=false;
}
function stoptimer() {
if(playing)
clearTimeout(timerID);
}
function showtime(remtime) {
document.cpanel.timeleft.value=remtime;
if(playing) {
if(remtime==0) {
stopgame();
return;
}
else {
temp=remtime-1;
timerID=setTimeout("showtime(temp)",1000);
      }
   }
}
function stopgame() {
stoptimer();
playing=false;
document.cpanel.timeleft.value=0;
clrholes();
display("Game Over");
alert('Game Over.\nYour score is:  '+totalhits);
}
function play() {
stoptimer();
if(playing) {
stopgame();
return;
}
playing=true;
clrholes();
totalhits=0;
document.cpanel.score.value=totalhits;
display("Playing");
launch();
showtime(gamelength);
}
function display(msg) {
document.cpanel.state.value=msg;
}
function launch() {
var launched=false;
while(!launched) {
mynum=random();
if(mynum!=currentpos) {
document.dmz.elements[mynum].checked=true;
currentpos=mynum;
launched=true;
      }
   }
}

function hithead(id) {
if(playing==false) {
clrholes();
display("Push Start to Play");
return;
}
if(currentpos!=id) {
totalhits+=-1;
document.cpanel.score.value=totalhits;
document.dmz.elements[id].checked=false;
}
else {
totalhits+=1;
document.cpanel.score.value=totalhits;
launch();
document.dmz.elements[id].checked=false;
   }
}

function random() {
return(Math.floor(Math.random()*100%numholes));
}
// End -->
</script>
</HEAD>


<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width="600" cellpadding="0" cellspacing="10">
<tr>
<td width="468" align="center">

	
</td>
<td width="120" align="center">

	
</td>
</tr>
</table>
<BR>
<BR>
<BASEFONT SIZE=3>
  <FONT SIZE=6>
<B><FONT SIZE="+2" FACE="Helvetica,Arial" ALIGN=RIGHT COLOR="#0000FF">
<b><A HREF="../index.htm" /" TARGET="_top">
Home</A> </b><img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <b><A HREF="index.htm" /games/"><font color="#FF0000">Games</font></A> </b>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <FONT COLOR="#006666">Hit The Dot</FONT></b></FONT><BR>
</B><BR>
  </FONT>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->

How many dots do you think you can hit in 30 seconds?  Play this interesting JavaScript game and find out!
<br>
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<BODY>
<center><h2>Hit-the-Dot</h2></center>
<center>Test your skill.  How many boxes can you check in 30 seconds?</center>
<form name="cpanel">
<center>
<table cellspacing=3>
<tr>
<td><input type="button" name="startstop" value=" Start Game | Stop Game " onClick="play()"></td>
<td><pre>    </pre></td>
<td align=right>Time:</td>
<td><input type="text" name="timeleft" size="4" onFocus="this.blur()"></td>
</tr>
<tr>
<td><input type="text" name="state" size="20" value="Push Start to Play" onFocus="this.blur()"></td>
<td><pre>    </pre></td>
<td align=right>Score:</td>
<td><input type="text" name="score" size="4" onFocus="this.blur()"></td>
</tr>
</table>
</center>
</form>
<form name="dmz">
<center>
<table cellspacing=3>
<tr>
<td colspan=10><hr size=1></td>
</tr>
<tr>
<td align="center" valign="center"><input type="radio" onClick="hithead(0)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(1)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(2)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(3)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(4)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(5)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(6)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(7)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(8)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(9)"></td>
</tr>
<tr>
<td align="center" valign="center"><input type="radio" onClick="hithead(10)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(11)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(12)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(13)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(14)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(15)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(16)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(17)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(18)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(19)"></td>
</tr>
<tr>
<td align="center" valign="center"><input type="radio" onClick="hithead(20)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(21)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(22)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(23)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(24)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(25)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(26)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(27)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(28)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(29)"></td>
</tr>
<tr>
<td align="center" valign="center"><input type="radio" onClick="hithead(30)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(31)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(32)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(33)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(34)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(35)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(36)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(37)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(38)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(39)"></td>
</tr>
<tr>
<td align="center" valign="center"><input type="radio" onClick="hithead(40)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(41)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(42)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(43)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(44)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(45)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(46)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(47)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(48)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(49)"></td>
</tr>
<tr>
<td align="center" valign="center"><input type="radio" onClick="hithead(50)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(51)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(52)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(53)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(54)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(55)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(56)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(57)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(58)"></td>
<td align="center" valign="center"><input type="radio" onClick="hithead(59)"></td>
</tr>
<tr><td colspan=10><hr size=1></td>
</tr></table></center></form>

<center><table cellspacing=3><tr><td><code>
<p><strong>Instructions:</strong>
<ol><li>Click on the radio buttons as<BR>
they are selected randomly by the computer.<BR>
<li>1 point per hit, minus 1 point per miss.<BR>
</ol></td></tr></table></center>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Games:  Hit The Dot</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  8.18 KB  " size="24">
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL> 

&lt;!-- TWO STEPS TO INSTALL HIT THE DOT:

   1.  Paste the coding into the HEAD of your HTML document
   2.  Put the last coding into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Copy this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  Josh Birk  --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
gamelength=30;
timerID=null
var playing=false;
var numholes=6*10;
var currentpos=-1;
function clrholes() {
for(var k=0;k&lt;document.dmz.elements.length;k++)
document.dmz.elements[k].checked=false;
}
function stoptimer() {
if(playing)
clearTimeout(timerID);
}
function showtime(remtime) {
document.cpanel.timeleft.value=remtime;
if(playing) {
if(remtime==0) {
stopgame();
return;
}
else {
temp=remtime-1;
timerID=setTimeout("showtime(temp)",1000);
      }
   }
}
function stopgame() {
stoptimer();
playing=false;
document.cpanel.timeleft.value=0;
clrholes();
display("Game Over");
alert('Game Over.\nYour score is:  '+totalhits);
}
function play() {
stoptimer();
if(playing) {
stopgame();
return;
}
playing=true;
clrholes();
totalhits=0;
document.cpanel.score.value=totalhits;
display("Playing");
launch();
showtime(gamelength);
}
function display(msg) {
document.cpanel.state.value=msg;
}
function launch() {
var launched=false;
while(!launched) {
mynum=random();
if(mynum!=currentpos) {
document.dmz.elements[mynum].checked=true;
currentpos=mynum;
launched=true;
      }
   }
}

function hithead(id) {
if(playing==false) {
clrholes();
display("Push Start to Play");
return;
}
if(currentpos!=id) {
totalhits+=-1;
document.cpanel.score.value=totalhits;
document.dmz.elements[id].checked=false;
}
else {
totalhits+=1;
document.cpanel.score.value=totalhits;
launch();
document.dmz.elements[id].checked=false;
   }
}

function random() {
return(Math.floor(Math.random()*100%numholes));
}
// End --&gt;
&lt;/script&gt;

&lt;!-- STEP TWO: Copy this code into the BODY of your HTML document  --&gt;

&lt;center&gt;&lt;h2&gt;Hit-the-Dot&lt;/h2&gt;&lt;/center&gt;
&lt;center&gt;Test your skill.  How many boxes can you check in 30 seconds?&lt;/center&gt;
&lt;form name="cpanel"&gt;
&lt;center&gt;
&lt;table cellspacing=3&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="button" name="startstop" value=" Start Game | Stop Game " onClick="play()"&gt;&lt;/td&gt;
&lt;td&gt;&lt;pre&gt;    &lt;/pre&gt;&lt;/td&gt;
&lt;td align=right&gt;Time:&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="timeleft" size="4" onFocus="this.blur()"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type="text" name="state" size="20" value="Push Start to Play" onFocus="this.blur()"&gt;&lt;/td&gt;
&lt;td&gt;&lt;pre&gt;    &lt;/pre&gt;&lt;/td&gt;
&lt;td align=right&gt;Score:&lt;/td&gt;
&lt;td&gt;&lt;input type="text" name="score" size="4" onFocus="this.blur()"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/center&gt;
&lt;/form&gt;
&lt;form name="dmz"&gt;
&lt;center&gt;
&lt;table cellspacing=3&gt;
&lt;tr&gt;
&lt;td colspan=10&gt;&lt;hr size=1&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(0)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(1)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(2)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(3)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(4)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(5)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(6)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(7)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(8)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(9)"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(10)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(11)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(12)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(13)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(14)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(15)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(16)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(17)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(18)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(19)"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(20)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(21)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(22)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(23)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(24)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(25)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(26)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(27)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(28)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(29)"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(30)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(31)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(32)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(33)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(34)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(35)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(36)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(37)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(38)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(39)"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(40)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(41)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(42)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(43)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(44)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(45)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(46)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(47)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(48)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(49)"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(50)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(51)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(52)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(53)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(54)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(55)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(56)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(57)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(58)"&gt;&lt;/td&gt;
&lt;td align="center" valign="center"&gt;&lt;input type="radio" onClick="hithead(59)"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=10&gt;&lt;hr size=1&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;/form&gt;

&lt;center&gt;&lt;table cellspacing=3&gt;&lt;tr&gt;&lt;td&gt;&lt;code&gt;
&lt;p&gt;&lt;strong&gt;Instructions:&lt;/strong&gt;
&lt;ol&gt;&lt;li&gt;Click on the radio buttons as&lt;BR&gt;
they are selected randomly by the computer.&lt;BR&gt;
&lt;li&gt;1 point per hit, minus 1 point per miss.&lt;BR&gt;
&lt;/ol&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/center&gt;

 

&lt;!-- Script Size:  8.18 KB  --&gt;
</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>